<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>下拉搜索框</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="./bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
</head>

<body>
    <label for="id_select">下拉框:</label>
    <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
        <optgroup>
            <option>123</option>
            <option>456</option>
            <option selected>789</option>
        </optgroup>
    </select>


    <!-- 引入Jquery文件 -->
    <script src="./jquery/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./bootstrap-select/js/bootstrap-select.js"></script>
    <script>
        $(window).on('load', function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });
            // $('.selectpicker').selectpicker('hide');  
        }); 
    </script>
</body>

</html>